<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>EasyUKey 认证</title>
		<script src="https://cdn.tailwindcss.com"></script>
		<script
			defer
			src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
		></script>
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
		/>
		<style>
			@keyframes pulse-ring {
				0% {
					transform: translate(-50%, -50%) scale(0.7);
					opacity: 1;
				}
				100% {
					transform: translate(-50%, -50%) scale(1.3);
					opacity: 0;
				}
			}
			.pulse-ring::before {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				height: 100%;
				border: 2px solid #3b82f6;
				border-radius: 50%;
				animation: pulse-ring 2s infinite;
			}
			[x-cloak] {
				display: none !important;
			}
			.pin-input {
				width: 3rem;
				height: 3rem;
				text-align: center;
				font-size: 1.5rem;
				font-weight: bold;
				border: 2px solid #e5e7eb;
				border-radius: 0.5rem;
				outline: none;
				transition: all 0.2s;
			}
			.pin-input:focus {
				border-color: #3b82f6;
				box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
			}
			.pin-input.filled {
				border-color: #10b981;
				background-color: #f0fdf4;
			}
		</style>
	</head>
	<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
		<div
			x-data="authFlow({{.Remaining}}, '{{.RawRequest}}')"
			x-init="init()"
			class="min-h-screen flex items-center justify-center p-4"
		>
			<div
				class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 relative overflow-hidden"
			>
				<!-- 认证请求视图 -->
				<div x-show="currentStep === 'auth'" x-cloak>
					<!-- 背景装饰 -->
					<div
						class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-full -translate-y-16 translate-x-16 opacity-10"
					></div>

					<!-- 标题区域 -->
					<div class="text-center mb-8">
						<div class="relative inline-block mb-4">
							<div
								class="w-20 h-20 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white text-3xl pulse-ring relative"
							>
								<i class="fas fa-shield-alt"></i>
							</div>
						</div>
						<h1 class="text-2xl font-bold text-gray-800 mb-2">EasyUKey 认证</h1>
						<p class="text-gray-600">请确认以下认证请求</p>
					</div>

					<!-- 认证信息卡片 -->
					<div class="bg-gray-50 rounded-xl p-6 mb-6">
						<div class="space-y-4">
							<!-- 用户信息 -->
							<div class="flex items-center">
								<div
									class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3"
								>
									<i class="fas fa-user text-blue-600"></i>
								</div>
								<div>
									<p class="text-sm text-gray-500">用户ID</p>
									<p class="font-semibold text-gray-800">{{.Request.UserID}}</p>
								</div>
							</div>
							<!-- 认证消息 -->
							<div class="flex items-center">
								<div
									class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3"
								>
									<i class="fas fa-info-circle text-green-600"></i>
								</div>
								<div>
									<p class="text-sm text-gray-500">认证消息</p>
									<p class="font-semibold text-gray-800">
										{{.Request.Message}}
									</p>
								</div>
							</div>
						</div>
					</div>

					<!-- 倒计时显示 -->
					<div
						class="bg-gradient-to-r from-orange-100 to-red-100 rounded-xl p-4 mb-6"
					>
						<div class="flex items-center justify-center">
							<div
								class="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center mr-3 flex-shrink-0"
							>
								<i class="fas fa-hourglass-half text-white text-sm"></i>
							</div>
							<div class="flex items-baseline space-x-1 text-orange-800">
								<p class="text-sm text-orange-700">请求将在</p>
								<p class="text-2xl font-bold" x-text="remaining"></p>
								<p class="text-lg">秒</p>
								<p class="text-sm text-orange-700">后过期</p>
							</div>
						</div>
						<div
							class="mt-3 w-full bg-orange-200 rounded-full h-2 overflow-hidden"
						>
							<div
								class="bg-gradient-to-r from-orange-400 to-red-500 h-2 rounded-full transition-all duration-1000"
								:style="'width: ' + (initialTime > 0 ? (remaining / initialTime * 100) : 0) + '%'"
							></div>
						</div>
					</div>

					<!-- 操作按钮 -->
					<div class="flex space-x-3">
						<button
							@click="submit('reject')"
							:disabled="expired || loading"
							class="flex-1 bg-gray-500 hover:bg-gray-600 disabled:bg-gray-300 text-white font-semibold py-3 px-6 rounded-xl transition-colors duration-200 flex items-center justify-center"
						>
							<i class="fas fa-times mr-2"></i>
							拒绝
						</button>
						<button
							@click="requirePIN()"
							:disabled="expired || loading"
							class="flex-1 bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 disabled:from-gray-300 disabled:to-gray-400 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 flex items-center justify-center transform hover:scale-105"
						>
							<i class="fas fa-check mr-2"></i>
							确认认证
						</button>
					</div>

					<!-- 过期提示 -->
					<div
						x-show="expired"
						x-transition
						class="mt-4 p-4 bg-red-100 border border-red-200 rounded-lg text-center"
					>
						<p class="text-red-700 font-semibold">
							<i class="fas fa-exclamation-triangle mr-2"></i>
							认证请求已过期
						</p>
					</div>
				</div>

				<!-- PIN输入视图 -->
				<div x-show="currentStep === 'pin'" x-cloak>
					<!-- 背景装饰 -->
					<div
						class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-full -translate-y-16 translate-x-16 opacity-10"
					></div>

					<!-- 标题区域 -->
					<div class="text-center mb-6">
						<div class="relative inline-block mb-4">
							<div
								class="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center text-white text-3xl pulse-ring relative"
							>
								<i class="fas fa-key"></i>
							</div>
						</div>
						<h1 class="text-2xl font-bold text-gray-800 mb-2">输入PIN密码</h1>
						<p class="text-gray-600">请输入您的6位PIN密码以验证身份</p>
					</div>

					<!-- PIN输入区域 -->
					<div class="mb-6 text-center">
						<input
							type="password"
							maxlength="6"
							inputmode="numeric"
							pattern="[0-9]*"
							placeholder="******"
							class="pin-input block mx-auto"
							x-model="pin"
							@input="onInput"
							autocomplete="one-time-code"
							style="
								letter-spacing: 0.5em;
								text-align: center;
								width: 12em;
								font-size: 2em;
							"
						/>
						<p class="text-sm text-gray-500 mt-2">
							可直接粘贴或连续输入6位数字
						</p>
					</div>

					<!-- 错误提示 -->
					<div
						x-show="pinErrorMessage"
						x-transition
						class="mb-4 p-3 bg-red-100 border border-red-200 rounded-lg text-center"
					>
						<p class="text-red-700 text-sm">
							<i class="fas fa-exclamation-triangle mr-2"></i>
							<span x-text="pinErrorMessage"></span>
						</p>
					</div>

					<!-- 操作按钮 -->
					<div class="flex space-x-3">
						<button
							@click="backToAuth()"
							:disabled="loading"
							class="flex-1 bg-gray-500 hover:bg-gray-600 disabled:bg-gray-300 text-white font-semibold py-3 px-6 rounded-xl transition-colors duration-200 flex items-center justify-center"
						>
							<i class="fas fa-arrow-left mr-2"></i>
							返回
						</button>
						<button
							@click="submitWithPIN()"
							:disabled="!isPinComplete || loading"
							class="flex-1 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 disabled:from-gray-300 disabled:to-gray-400 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 flex items-center justify-center transform hover:scale-105"
						>
							<i class="fas fa-unlock mr-2"></i>
							验证并认证
						</button>
					</div>
				</div>

				<!-- 结果视图 -->
				<div x-show="currentStep === 'result'" x-cloak class="text-center">
					<div class="mb-6">
						<div
							class="w-20 h-20 rounded-full flex items-center justify-center text-white text-3xl mx-auto mb-4"
							:class="confirmStatus === true ? 'bg-gradient-to-br from-green-500 to-emerald-600' : 'bg-gradient-to-br from-red-500 to-orange-600'"
						>
							<i
								class="fas"
								:class="confirmStatus === true ? 'fa-check' : 'fa-times'"
							></i>
						</div>
						<h1
							class="text-2xl font-bold text-gray-800 mb-2"
							x-text="resultStatus === 'success' ? '认证完成' : '认证失败'"
						></h1>
						<p class="text-lg text-gray-600" x-text="resultMessage"></p>
					</div>
					<div class="text-sm text-gray-500">
						<p>此窗口将在 10 秒后自动关闭</p>
					</div>
				</div>

				<!-- 全局加载状态 -->
				<div
					x-show="loading"
					x-transition
					class="absolute inset-0 bg-white bg-opacity-90 flex items-center justify-center rounded-2xl"
				>
					<div class="text-center">
						<div
							class="w-12 h-12 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mx-auto mb-4"
						></div>
						<p
							class="text-gray-600"
							x-text="currentStep === 'pin' ? '正在验证认证，请稍候...' : '处理中...'"
						></p>
					</div>
				</div>
			</div>
		</div>

		<script>
			function authFlow(initialRemaining, rawRequest) {
				return {
					initialTime: initialRemaining,
					remaining: initialRemaining,
					rawRequest: rawRequest,
					expired: initialRemaining <= 0,
					loading: false,
					currentStep: "auth", // 'auth', 'pin', 'result'
					resultMessage: "",
					confirmStatus: "", // true or false
					resultStatus: "", // 'success' or 'error'
					pin: "",
					pinErrorMessage: "",
					get isPinComplete() {
						return this.pin.length === 6;
					},
					onInput(e) {
						this.pin = e.target.value.replace(/\D/g, "").slice(0, 6);
						this.pinErrorMessage = "";
					},

					init() {
						if (!this.expired) {
							this.startTimer();
						}
					},

					startTimer() {
						const interval = setInterval(() => {
							this.remaining--;
							if (this.remaining <= 0) {
								this.remaining = 0;
								this.expired = true;
								clearInterval(interval);
							}
						}, 1000);
					},

					// 进入PIN输入步骤
					requirePIN() {
						if (this.expired || this.loading) return;
						this.currentStep = "pin";
						// 聚焦到第一个PIN输入框
						this.$nextTick(() => {
							// No specific focus logic needed here as pin is a single input
						});
					},

					// 返回认证页面
					backToAuth() {
						this.currentStep = "auth";
						this.pin = ""; // Clear the pin input
						this.pinErrorMessage = "";
					},

					// 清空PIN
					clearPIN() {
						this.pin = "";
						this.pinErrorMessage = "";
					},

					// 带PIN的认证提交
					async submitWithPIN() {
						if (!this.isPinComplete || this.expired || this.loading) return;
						this.loading = true;
						this.pinErrorMessage = "";

						try {
							const response = await fetch("/confirm", {
								method: "POST",
								headers: {
									"Content-Type": "application/json",
								},
								body: JSON.stringify({
									action: "confirm",
									request: this.rawRequest,
									pin: this.pin,
								}),
							});

							const result = await response.json();
							if (!response.ok) {
								throw new Error(result.message || "认证失败");
							}

							// 显示真正的认证结果
							const isSuccess =
								result.status === "success" && result.confirmStatus === true;
							this.showResult(result.message, isSuccess, result.status);
						} catch (error) {
							console.error("认证失败:", error);
							this.pinErrorMessage = error.message || "PIN验证失败，请重试";
							this.loading = false;
						}
					},

					// 拒绝认证
					async submit(action) {
						if (action === "reject") {
							if (this.expired || this.loading) return;
							this.loading = true;

							try {
								const response = await fetch("/confirm", {
									method: "POST",
									headers: {
										"Content-Type": "application/json",
									},
									body: JSON.stringify({
										action: action,
										request: this.rawRequest,
									}),
								});

								const result = await response.json();
								if (!response.ok) {
									throw new Error(result.message || "发生未知错误");
								}
								this.showResult(
									result.message,
									result.confirmStatus,
									result.status
								);
							} catch (error) {
								console.error("操作失败:", error);
								this.showResult(
									error.message || "操作失败，请重试",
									false,
									"error"
								);
							}
						}
					},

					showResult(message, confirmStatus, resultStatus) {
						this.loading = false;
						this.currentStep = "result";
						this.resultMessage = message;
						this.confirmStatus = confirmStatus;
						this.resultStatus = resultStatus;
						this.clearPIN(); // 清空PIN

						setTimeout(() => {
							window.close();
						}, 10000);
					},
				};
			}
		</script>
	</body>
</html>
